<template>
  <information />
  <template v-if="store.basicData.status == 1">
    <requestion :dataImg="dataImg" v-model="desp" v-model:yuyue_time="yuyue_time" v-model:contactName="contactName"
      v-model:phone="phone" @uploadImg="uploadImg" @delImg="delImg" />
    <!-- <contact v-model:contactName="contactName" v-model:phone="phone" /> -->
  </template>
  <status v-else />
  <div style="display: flex; align-items: center; justify-content: flex-start">
    <div style="z-index: 9999999999;">
      {{dataImg}}
    </div>
    <div class="btn-use2" v-if="store.basicData.status == 1" @click="submit">
      提交
    </div>
  </div>
</template>
<script setup>
  import { useRouter } from 'vue-router';
  import { basicData } from '../store/data.js';
  import status from '../components/status.vue';
  import information from '../components/information.vue';
  import requestion from '../components/requestion.vue';
  // import contact from '../components/contact.vue';
  import { ref, getCurrentInstance, onBeforeMount } from 'vue';

  const store = basicData(); //pinia
  const router = useRouter();
  const { proxy } = getCurrentInstance();
  let dataImg = ref([]); //图片数组
  let desp = ref(''); //问题描述
  let phone = ref(null); //电话
  let contactName = ref(''); //姓名
  let yuyue_time = ref('');
  let u = ref('')
  const clearFile = ref(null); //input  属性节点
  onBeforeMount(() => {
    /* console.log(route.params.id, 199); */
    /* console.log(route.query.id, 199); */
  });
  //删除图片
  const delImg = (i) => {
    dataImg.value.splice(i, 1);
    clearFile.value = null;
  };
  //上传图片
  const uploadImg = (e) => {
    if (dataImg.value.length > 8) {
      alert('最多支持上传9张图片');
    } else {
      var e = window.event || e;
      // 获取图片地址
      var file = e.target.files[0];
      var formData = new FormData();

      formData.append('file', file);
      proxy.$axios
        .post(`${proxy.baseUrl}/common/upload`, formData)
        .then((res) => {
          let url = res.data.data.fullurl;
          let type = url.lastIndexOf('.mp4') !== -1 ? 'video' : 'image';
          dataImg.value.push({
            url: url,
            type: type,
          });

          clearFile.value = null;
        })
        .catch((e) => {
          alert('图片上传失败');
        });
    }
  };
  //提交
  const submit = () => {
    if (!/^1[3456789]\d{9}$/.test(phone.value)) {
      alert('手机号码有误，请重填');
    } else if (
      desp.value == '' ||
      phone.value == '' ||
      contactName.value == '' ||
      yuyue_time.value == ''
    ) {
      alert('请输入完整信息');
      // phase/fault
    } else {
      proxy.$axios
        .post(`${proxy.baseUrl}/warranty/smadd`, {
          equipment_id: store.basicData.id, //设备id
          describe: desp.value, //问题描述
          contacts: contactName.value, //联系人
          mobile: phone.value, //联系电话
          images: dataImg.value.map(i => i.url).toString(),
          yuyue_time: yuyue_time.value,
          contract_status: 6,
          warranty_type: 1,
          hospital_id: store.basicData.hospital_id,
        })
        .then((res) => {
          alert(res.data.msg);
          if (res.data.msg == '成功') {
            getEquipmentInfo();
          }
        });
    }
  };
  /* 获取设备信息 */
  const getEquipmentInfo = () => {
    //421 store.basicData.id
    proxy.$axios
      .post(`${proxy.baseUrl}/phase/getEquipment`, { id: 423 })
      .then((res) => {
        store.$patch((state) => {
          state.basicData = res.data.data;
          state.department_name = res.data.data.department.name;
        });
      });
  };
  //返回
  const back = () => {
    router.push({
      path: '/',
    });
  };

  //拍照上传图片
</script>
<style scoped></style>